<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const elementId = ref('deviceStatisticalChart')

onMounted(() => {
  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('deviceStatisticalChart')
  var myChart = echarts.init(chartDom, 'dark')
  window.addEventListener('resize', function () {
    myChart.resize()
  })
  var option: EChartsOption

  option = {
    backgroundColor: '',
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [89.3, 58212, 'Matcha Latte'],
        [57.1, 78254, 'Milk Tea'],
        [74.4, 41032, 'Cheese Cocoa'],
        [50.1, 12755, 'Cheese Brownie'],
        [89.7, 20145, 'Matcha Cocoa'],
        [68.1, 79146, 'Tea'],
        [19.6, 91852, 'Orange Juice'],
        [10.6, 101852, 'Lemon Juice'],
        [32.7, 20112, 'Walnut Brownie']
      ]
    },
    grid: { containLabel: true, top: 0, bottom: 40, left: 0, right: 60 },
    xAxis: { name: 'amount' },
    yAxis: { type: 'category' },
    visualMap: {
      orient: 'horizontal',
      left: 'center',
      min: 10,
      max: 100,
      text: ['High Score', 'Low Score'],
      // Map the score column to color
      dimension: 0,
      inRange: {
        color: ['#65B581', '#FFCE34', '#FD665F']
      }
    },
    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }
    ]
  }

  option && myChart.setOption(option)
})
</script>

<template>
  <div :id="elementId" style="width: 100%; height: 100%"></div>
</template>
